<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    </style>
</head>
<body>
<!--border代表有无边框，没有border或border='0'-->

<!--
难点，
1.内容换行，内容挤压
2.表格嵌套表格，嵌套其他元素
3.thead tbody tfoot含义
-->
<table border="1" width="300">
    <caption>数据统计</caption>
    <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
    </tr>
    <tr>
        <td>手机充值、ip卡 </td>
        <td colspan="2">办公设备、文具</td><!--跨两列-->
    </tr>
    <tr>
        <td rowspan="2">各种卡的总汇</td><!--跨两行-->
        <td>铅笔</td>
        <td>彩笔</td>
    </tr>
    <tr>
        <td>打印</td>
        <td>刻录</td>
    </tr>
</table>

<h4>有单元格边距:</h4>
<table border="1"
       cellpadding="10"
       cellspacing="10">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

<table border="1"
       cellspacing="1">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>


<table class="table table-striped">
    <tbody>
    <tr>
        <th>日期</th>
        <th>备注</th>
        <th>模块</th>
        <th></th>
    </tr>
    <tr rel="1">
        <td>2021-02-04 周四</td>
        <td>添加备注，编辑备注工能</td>
        <td>学习计划</td>
        <td>
            <div class="tools">
                <i class="fa fa-edit edit_blog" rel="1"></i>
                <i class="fa fa-trash-o del_log" rel="1"></i>
            </div>
        </td>
    </tr>
    <tr rel="3">
        <td>2021-02-04 周四</td>
        <td>点击分类自动搜索实现</td>
        <td>账单管理</td>
        <td>
            <div class="tools">
                <i class="fa fa-edit edit_blog" rel="3"></i>
                <i class="fa fa-trash-o del_log" rel="3"></i>
            </div>
        </td>
    </tr>
    </tbody>
</table>
</body>



</html>